<template>
  <div >
    <div class="myStyle allT center" :class="dayModel===false?'dBColor':'lBColor'">
      <div class="font2 center">@copyright Power By Heaven 2021</div>
      <div @click="goToMiit" v-text="recordNumber" class="font1 center"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "CaseNumber",
  data(){
    return {
      recordNumber: '',
    }
  },
  computed:{
    dayModel(){
      return this.$store.state.dayModel;
    }
  },
  methods: {
    goToMiit(){
      window.open("https://beian.miit.gov.cn/","_blank")
    }
  },
  mounted(){
    axios.get("/cNumber").then( (res) => {
      this.recordNumber = res.data;
    })
  }
}
</script>

<style scoped>
.dBColor {
  background-color: black;
}
.lBColor {
  background-color: white;
}
.myStyle {
  width: inherit;
  height: 150px;
  margin-top: 100px;
  border-radius: 10px;
  box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
}
.font2 {
  padding-top: 30px;
  font-size: 30px;
  font-weight: 700;
}
.font1 {
  font-size: 20px;
  font-weight: 300;
}
.center {
  text-align: center;
  position: relative;
  top: 20%;
}
.center:hover {
  cursor: pointer;
}
</style>